<template>
  <div class="border-setting-panel" v-if="showVisible">
    <div class="title">边框</div>
    <div class="border-wraper">
      <div class="borders-container">
        <div
          v-for="direct in directList"
          :class="[`${direct}`, direct === activeDirect ? 'actived ' : '']"
          class="item"
          :key="direct"
          @click="handleChangeDirect(direct)"
        ></div>
      </div>
    </div>
    <div class="arrow-selector-line"></div>
    <!--    线性-->
    <div class="arrow-selector" @mouseover="handleShowLine">
      <span class="title">线形</span>
      <span class="icon-right-arrow"></span>
      <!--      线性弹出框-->
      <div class="pop">
        <div
          v-if="showLine"
          @mouseleave="showLine = false"
          class="border-style-selector"
          style="top: 122px"
        >
          <div v-for="lineStyle in lineStyles" :key="lineStyle">
            <div
              class="border-selector"
              :class="[lineStyle]"
              @click="handleChangeLine(lineStyle)"
            >
              <span v-if="lineStyle === activeLine" class="checked"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow-selector-line"></div>
    <div class="arrow-selector" @mouseover="handleShowColor(true)">
      <span class="title">颜色</span>
      <span class="icon-right-arrow"></span>
      <!--      颜色弹出框-->
      <div class="pop">
        <color-select
          ref="colorSelect"
          @changeColor="handleChangeColor"
        ></color-select>
      </div>
    </div>
  </div>
</template>
<script>
import ColorSelect from './ColorSelect'

export default {
  name: 'BorderSelect',
  components: {
    ColorSelect
  },
  data () {
    return {
      showVisible: false,
      showLine: false,
      directList: [
        'border-none',
        'border-all',
        'border-outside',
        'border-left',
        'border-right',
        'border-top',
        'border-bottom'
      ],
      lineStyles: [
        'border-solid-1',
        'border-solid-2',
        'border-dotted-1',
        'border-dotted-2'
      ], // 线性选择
      activeDirect: 'border-bottom',
      activeLine: 'border-solid-1', // 线形,
      activeColor: '000000',
      actionType: '' // 操作类型
    }
  },
  mounted: function () {
    const that = this
    const func = (e) => {
      if (
        that.showVisible &&
        e.target.className !== 'border-setting-panel' &&
        e.target.className !== 'drop-down-arrow'
      ) {
        that.showVisible = false
      }
    }
    document.addEventListener('click', func)
  },
  computed: {
    borderWidth () {
      return parseInt(this.activeLine.split('-')[2])
    },
    borderStyle () {
      return this.activeLine.split('-')[1]
    }
  },
  methods: {
    initData (data) {
      this.activeDirect = data.activeBorder
      if (data.showVisible === false) {
        this.showVisible = false
      } else {
        this.showVisible = !this.showVisible
      }
    },
    handleShowLine () {
      this.showLine = true
      this.$refs.colorSelect &&
        this.$refs.colorSelect.initColorPicker({
          color: this.activeColor,
          showColor: false,
          actionType: 'setBorder'
        })
    },
    handleShowColor (flag) {
      this.showLine = false
      const data = {
        color: this.activeColor,
        showColor: flag,
        actionType: 'setBorder'
      }
      this.$refs.colorSelect.initColorPicker(data)
    },

    handleChangeDirect (direct) {
      this.activeDirect = direct
      this.handleChangeBorder()
    },

    handleChangeColor (data) {
      this.activeColor = data.color.substring(1)
      this.handleChangeBorder()
    },
    handleChangeLine (val) {
      this.activeLine = val
      this.handleChangeBorder()
    },
    handleChangeBorder () {
      const config = {
        direct: this.activeDirect.split('-')[1],
        borderWidth: this.borderWidth,
        borderStyle: this.borderStyle,
        borderColor: this.activeColor
      }
      this.$emit('changeBorder', config)
      this.showVisible = false
      this.showLine = false
    }
  }
}
</script>
<style>
.border-none {
  background-image: url(~@/assets/image/border-none.png);
}

.border-all,
.border-none {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-all {
  background-image: url(~@/assets/image/border-all.png);
}

.border-outside {
  background-image: url(~@/assets/image/border-outside.png);
}

.border-left,
.border-outside {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-left {
  background-image: url(~@/assets/image/border-left.png);
}

.border-right {
  background-image: url('~@/assets/image/border-right.png');
}

.border-right,
.border-top {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-top {
  background-image: url(~@/assets/image/border-top.png);
}

.border-bottom {
  background-image: url(~@/assets/image/border-bottom.png);
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-setting-panel {
  position: relative;
  width: 120px;
  padding: 0 15px;
  box-sizing: border-box;
}

.border-setting-panel::before {
  content: '';
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 999999999;
  top: -16px;
  left: 32px;
}
.border-setting-panel .title {
  font-size: 12px;
  color: #03101a;
  line-height: 20px;
  margin: 10px 0 7px 2px;
}

.border-setting-panel .color-picker {
  position: absolute;
  background-color: #fff;
  left: 125px;
  top: 10px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.border-setting-panel .arrow-selector-line {
  width: 100px;
  height: 1px;
  border-bottom: 1px solid #e4ebf0;
  margin-left: -5px;
}

.border-wraper .borders-container {
  display: flex;
  flex-wrap: wrap;
  width: 75px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.border-wraper .borders-container .item {
  height: 21px;
  width: 21px;
  margin: 1px 1px 0 0;
  box-sizing: border-box;
}

.border-wraper .borders-container .item:hover {
  background-color: #e4ebf0;
  border-radius: 2px;
  cursor: pointer;
}

.border-wraper .borders-container .item.actived {
  background-color: rgba(150, 208, 250, 0.5);
  border-radius: 2px;
}

.arrow-selector:hover {
  cursor: pointer;
}

.arrow-selector:not(:first-child) {
  padding: 15px 0;
}

.arrow-selector:last-child {
  padding: 15px 0 0;
  margin-bottom: 10px;
  border: none;
}

.arrow-selector .title {
  font-size: 12px;
  color: #03101a;
  line-height: 20px;
}

.arrow-selector .title:hover {
  cursor: pointer;
}

.arrow-selector .icon-right-arrow {
  display: inline-block;
  background-image: url(~@/assets/image/arrow.svg);
  background-repeat: no-repeat;
  height: 10px;
  width: 5px;
  float: right;
  margin-top: 5px;
}

.border-style-selector {
  position: absolute;
  display: inline-block;
  background-color: #fff;
  left: 125px;
  top: 10px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  width: 120px;
}

.border-style-selector > div:hover {
  background-color: #f5f8fa;
  cursor: pointer;
}

.border-style-selector .border-selector {
  position: relative;
  height: 25px;
  width: 65px;
  margin: 0 15px;
  box-sizing: border-box;
}

.border-style-selector .checked {
  background-image: url(~@/assets/image/active-check.svg);
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  right: -30px;
  width: 13px;
  height: 9px;
  margin-top: 8px;
  box-sizing: border-box;
}
.border-solid-1:after {
  border-top-style: solid;
  border-width: 1px;
}

.border-solid-1:after,
.border-solid-2:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-solid-2:after {
  border-top-style: solid;
  border-width: 2px;
}

.border-solid-3:after {
  border-top-style: solid;
  border-width: 3px;
}

.border-dotted-1:after,
.border-solid-3:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-dotted-1:after {
  border-top-style: dotted;
  border-width: 1px;
}

.border-dotted-2:after {
  border-top-style: dotted;
  border-width: 2px;
}

.border-dotted-2:after,
.border-dotted-3:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-dotted-3:after {
  border-top-style: dotted;
  border-width: 3px;
}

.border-dashed-1:after {
  border-top-style: dashed;
  border-width: 1px;
}

.border-dashed-1:after,
.border-dashed-2:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-dashed-2:after {
  border-top-style: dashed;
  border-width: 2px;
}

.border-dashed-3:after {
  border-top-style: dashed;
  border-width: 3px;
}

.border-dashed-3:after,
.border-double-1:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-double-1:after {
  border-top-style: double;
  border-width: 1px;
}

.border-double-2:after {
  border-top-style: double;
  border-width: 2px;
}

.border-double-2:after,
.border-double-3:after {
  content: '';
  width: 65px;
  height: 0;
  display: block;
  position: absolute;
  top: 50%;
}

.border-double-3:after {
  border-top-style: double;
  border-width: 3px;
}

.cardList-container {
  position: relative;
  width: 301px;
  font-size: 12px;
  text-align: left;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: 6px;
}

.cardList-container .cardList-title {
  width: 100%;
  color: #3e4e59;
  line-height: 20px;
  border-bottom: 1px solid #e4ebf0;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding: 9px 0 5px 10px;
}
</style>
